<template>
	<div class="myLive">
		<div class="liveReservation_h clear">
			<router-link to="/teach/live/listappoint">直播预约</router-link>
			<router-link to="/teach/live/listlive">我的直播</router-link>
		</div>
		<!--  -->
		<div class="Invite_sl clear">
			<!--  -->
			<div class="myLive_ch fl">
				<label>
					<input type="radio" name="check" checked>
					<span @click="changeCount(1)">已审核（<i>{{normal}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(2)">审核中（<i>{{review}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(3)">被打回（<i>{{reject}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(5)">已过期（<i>{{pass}}</i>）</span>
				</label>
			</div>
			<router-link to="/teach/live/addappoint" class="make_link fr">预约直播</router-link>
		</div>
		<!--  -->
		<div class="myLive_">
			<ul v-loading="loading" element-loading-text="拼命加载中">
				<li class="teachVideo_ls myLive_ls clear" v-for="(item, index) in myliveList" :key="item.id">
					<div class="teachVideo_lsl fl box">
						<img :src="BASE_URL + item.picture">
					</div>
					<div class="teachVideo_lsr">
						<div class="teachVideo_lsr1 clear">

							<span class="Lstate_w fl" v-if="item._status === 1">未开始</span>
							<span class="Lstate_j fl" v-if="item._status === 2">进行中</span>
							<span class="Lstate_o fl" v-if="item._status === 3">已结束</span>
							<span class="Lstate_s fl" v-if="item._status === 5">审核中</span>
							<span class="Lstate_o fl" v-if="item._status === 4">已过期</span>
							<span class="Lstate_x fl" @click="refusalTXT(item.comment)" v-if="item._status === 6">拒绝理由</span>
							<div class="live_url" @click="getLiveState(item._status, item.id)">
								{{item.name}}
							</div>
							<div class="teachVideo_lsr1_r fr">
								<el-popover placement="bottom" width="" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li v-if="item._status === 4 || item._status === 3">
											<router-link :to="{path: '/teach/live/edit', query: {id: item.id, status: item._status}}">重新预约</router-link>
										</li>
										<li v-else-if="item._status !== 1 || item._status !== 2  || item._status != 3">
											<router-link :to="{path: '/teach/live/edit', query:{id: item.id, status: item._status}}">编辑</router-link>
										</li>
										<li v-if="item._status === 3">
											<router-link :to="{path: '/teach/live/detaillive', query:{id: item.id}}">统计</router-link>
										</li>
										<li>
											<router-link :to="{path: '/teach/live/detailappoint', query: {id: item.id}}">查看</router-link>
										</li>
										<li @click="removeList(item.id)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<!--  -->
						<div class="teachVideo_lsr2">
							<span>开始时间：{{item.start_time}}</span>
							<span v-if='!$store.state.isSchool'>上课教室：{{item.cl_name}}</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :current-page="page_index" :page-size="page_size" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<!-- 拒绝理由 -->
		<el-dialog title="拒绝理由" :visible.sync="refusalVisible" width="400px" custom-class="refusalVisible" :close-on-click-modal="false">
			<div class="refusalTxT">
				<span>{{profile}}</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: 0,
			myliveList: [],
			refusalVisible: false,
			loading: true,
			normal: 0, //正常
			review: 0, //审核中
			reject: 0, //拒绝
			pass: 0, //已过期
			Qstate: 1,
			live_id: '',
			profile: '',
			refusalVal: [],
			placeholder: false,
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"'
		}
	},
	created() {
		this.getliveCount()
		this.getmyLiveList();

	},
	methods: {
		/**
		 * 查询直播的状态
		 * @DateTime 2020-03-06T09:38:20+0800
		 * @param    {[type]}                 val [description]
		 * @param    {[type]}                 id  [description]
		 * @return   {[type]}                     [description]
		 */
		getLiveState(val, id) {

			switch (parseInt(val)) {
				case 1:
					this.$message.warning('直播还没开始哦~，期待你的到来');
					break;
				case 2:
					let host = sessionStorage.getItem('host')
					let redirectParams = sessionStorage.getItem('redirect_params')
					let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/liveRoom&id=${id}`
					window.open(link)
					break;
				case 3:
					this.$message.warning('直播已结束哦~，下次早点来');
					break;
				case 4:
					this.$message.warning('直播已过期哦~，过期了不能观看啦');
					break;
				case 5:
					this.$message.warning('直播审核中哦~，还在准备呢');
					break;
				case 6:
					this.$message.warning('直播被拒绝哦~， 唉，不知道为什么被拒绝');
					break;
				default:
					break;
			}
		},
		//获取状态数量
		getliveCount() {
			let success = (res => {
				let data = res.data;
				this.normal = data.normal ? data.normal : 0
				this.pass = data.pass ? data.pass : 0
				this.reject = data.reject ? data.reject : 0
				this.review = data.review ? data.review : 0
			});
			this.$ajax({
				url: 'api/live/live_list_count',
				method: 'get',
				params: { userid: this.$g.user_id },
				func: { success: success }
			})
		},
		//直播列表
		getmyLiveList() {
			let success = (res => {
				let data = res.data;
				this.myliveList = data.data ? data.data : [];
				this.total_number = data.data_sum;
				this.loading = false;
				this.myliveList.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			});
			this.$ajax({
				url: 'api/live/live_list',
				method: 'get',
				params: {
					page_index: this.page_index,
					page_size: this.page_size,
					userid: this.$g.user_id,
					review: this.Qstate,
				},
				func: { success: success }
			})
		},
		////筛选状态
		changeCount(stare = null) {
			this.Qstate = stare;
			this.getmyLiveList()
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getmyLiveList();
		},
		refusalTXT(val) {
			if (val === '') {
				return this.$message.warning('拒绝理由为空');
			}
			this.profile = val
			this.refusalVisible = true;
		},
		//删除
		removeList(res_id) {
			this.$confirm('确定要删除该条直播吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.getmyLiveList();
					this.getliveCount()

				});
				this.$ajax({
					url: 'api/live/live',
					method: 'delete',
					params: {
						liveid: res_id,
						type: 2
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
	}
}
</script>